<template>
  <div class="bottom tabbar-box">
    <div class="tabbar-body flex">
      <div
        v-for="(item, index) in navList"
        :key="item.name"
        class="tabbar-item flex"
        @click="navItemClick(item)"
      >
        <img
          v-if="index === activeIndex"
          class="item-img"
          :src="item.iconActive"
          alt=""
        />
        <img v-else class="item-img" :src="item.icon" alt="" />
        <div
          :class="[{ 'item-name-active': index === activeIndex }]"
          class="item-name"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
  <div class="seat bottom"></div>
</template>
<script setup>
import icon1 from "@/assets/tabbar/icon1.png";
import icon1A from "@/assets/tabbar/icon1A.png";
import icon2 from "@/assets/tabbar/icon2.png";
import icon2A from "@/assets/tabbar/icon2A.png";
import $router from "@/utils/$router.js";

const navList = [
  {
    pagePath: "/views/homePage",
    text: "首页",
    icon: icon1,
    iconActive: icon1A,
  },
  {
    pagePath: "/views/myPage",
    icon: icon2,
    iconActive: icon2A,
    text: "我的",
  },
  {
    pagePath: "/views/homePage",
    text: "首页1",
    icon: icon1,
    iconActive: icon1A,
  },
  {
    pagePath: "/views/myPage",
    icon: icon2,
    iconActive: icon2A,
    text: "我的2",
  },
];

const props = defineProps({
  activeIndex: {
    default: 0,
  },
});

// #ifdef MP-WEIXIN
// uni.hideTabBar();
// #endif

function navItemClick(item) {
  // $router.switchTab(item.pagePath);
}
</script>
<style scoped lang="scss">
.tabbar-box {
  background-color: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  .tabbar-body {
    height: 50px;
    box-sizing: content-box;
    border-top: 0.5px solid #dadbde;
    .tabbar-item {
      height: 100%;
      flex-direction: column;
      flex: 1;

      .item-img {
        width: 20px;
        height: 20px;
      }
      .item-name {
        font-size: 12px;
        margin-top: 2px;
        line-height: 16px;
        color: #c7c8dc;
      }
      .item-name-active {
        color: $theme-color;
      }
    }
  }
}
.seat {
  height: 50px;
  box-sizing: content-box;
}
</style>
